<% use crate::utils::urls; %>
<turbo-frame id="upload">
  <div class="notebook">
    <section>
      <% if error.is_some() { %>
      <h1><span class="material-symbols-outlined" style="color: var(--highlite-red)">cloud_upload</span>Error</h1>
      <% } else { %>
      <h1><span class="material-symbols-outlined">cloud_upload</span>Upload Data</h1>
      <% } %>
      
      <% if error.is_some() { %>
        <p>Hmm, something went wrong. Make sure:</p>
      <% } else { %>
        <p>You can upload your datasets using the CSV format. Before uploading, make sure:</p>
      <% } %>
      
      <ol>
        <li>If the CSV has a header, the column names are alphanumeric, contain no spaces and don't start with a number</li>
        <li>The CSV is comma (<code>,</code>) delimited</li>
      </ol>
    
      <% if error.is_some() { %>
      <h4>Error: </h4>
      <div class="markdown-body">
        <pre><code><%= error.unwrap() %></code></pre>
      </div>
      <% } %>
    
      <p>If you are exporting data from a PostgreSQL database, you can use <code>psql</code> to generate a valid CSV file with a header:</p>
      <div class="markdown-body">
        <pre><code class="language-sql">\copy your_table_name TO 'output.csv' CSV HEADER</code></pre>
      </div>
    
    </section>
    
    <section>
      <form action="<%- urls::deployment_uploader() %>" method="post" enctype="multipart/form-data" data-turbo-frame="upload">
        <div class="flex flex-center mb-3">
          <input class="form-control" id="file" type="file" name="file" accept="text/csv,application/json" required="true" />
          <div class="flex flex-center" style="margin-left: 2rem;">
            <input type="checkbox" name="has_header" checked id="has_header" style="margin-right: 0.5rem;" checked />
            <label for="has_header">My CSV has a header</label>
          </div>
        </div>
    
        <div class="d-flex justify-content-start">
          <button class="btn btn-secondary-web-app" type="submit" data-turbo="false">Upload</button>
        </div>
      </form>
    </section>
  </div>
</turbo-frame>
